/* eslint-disable react-native/no-inline-styles */
import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  Text,
  Image,
  ScrollView,
  TouchableOpacity,
  Modal,
  DatePickerAndroid
} from 'react-native';
import styled from 'styled-components';
import { getDepList, getDeptDetails } from '../../../api/index';
import { getToken, getUserInfo } from '../../../utils/auth';
import { Actions } from 'react-native-router-flux';
import Echarts from '../../../components/Echarts/index';
// import DatePicker from 'react-native-datepicker';

export default class talkTotal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '谈话详情',
      imgUrl: require('../../../assets/work/sportsRankings/backtrack.png'),
      showdepart: false,
      departmentLists: [],
      curIndex: '', // 选中的部门
      curDeptName: '', // 选中的部门名称
      datetime: ''
    };
  }
  async openDatePick() {
    try {
      const { action, year, month, day } = await DatePickerAndroid.open({
        date: new Date()
      });
      if (action !== DatePickerAndroid.dismissedAction) {
        alert(year + '/' + month + '/' + day);
      }
    } catch ({ code, message }) {
      console.error('Cannot open date-picker', message);
    }
  }
  componentWillMount() {
    getToken().then(token => {
      getUserInfo().then(info => {
        getDepList(token, info.policeBaseInfoVo.cusNumber).then(res => {
          console.log(res.data);
          getDeptDetails(token, res.data[0].sdtDeptId).then(data => {
            console.log(data, 37);
          });
          this.setState({
            departmentLists: res.data,
            curIndex: res.data[0].sdtDeptId,
            curDeptName: res.data[0].sdtDeptName
          });
        });
      });
    });
  }
  render() {
    const option = {
      title: {
        text: '谈话人数分析'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        x: '60%',
        y: 'center',
        data: ['谈话人次', '谈话人数', '未谈话的人'],
        textStyle: {
          //图例文字的样式
          color: '#666', //文字颜色
          fontSize: 12 //文字大小
        }
      },
      series: [
        {
          name: '谈话人数分析',
          type: 'pie',
          radius: ['40%', '60%'],
          center: ['18%', '50%'],
          avoidLabelOverlap: false,
          color: ['#3699FF', '#5DC7FE', '#726FFE', '#DF86F0', '#F5A7C1'],
          label: {
            normal: {
              show: false,
              position: 'center'
            },
            emphasis: {
              show: true,
              textStyle: {
                fontSize: '16',
                fontWeight: 'bold'
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: [
            { value: 241, name: '谈话人次' },
            { value: 182, name: '谈话人数' },
            { value: 152, name: '未谈话的人' }
          ]
        }
      ]
    };
    const talkRateOption = {
      title: {
        text: '谈话率分析'
        // subtext: '数据来自网络'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      // legend: {
      //   data: ['2011年']
      // },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        axisLine: {
          //y轴
          show: false
        },
        axisTick: {
          //y轴刻度线
          show: false
        },
        splitLine: {
          //网格线
          show: false
        },
        show: false
      },
      yAxis: {
        axisTick: {
          //y轴刻度线
          show: false
        },
        type: 'category',
        data: ['谈话率', '集团教育']
      },
      series: [
        {
          name: '2011年',
          type: 'bar',
          data: [0, 113.15],
          itemStyle: {
            normal: { color: '#508EF9' }
          },
          label: {
            normal: {
              show: true,
              position: 'insideRight',
              color: '#3699FF'
            }
          }
        }
      ]
    };
    const talkNumbers = {
      title: {
        text: '谈话人次数分析'
        // subtext: '数据来自网络'
      },
      legend: {
        // orient: 'vertical',
        x: '50%',
        data: ['人次', '谈话人数'],
        textStyle: {
          //图例文字的样式
          color: '#666', //文字颜色
          fontSize: 12 //文字大小
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      xAxis: {
        type: 'category',
        data: ['十必谈', '月度谈', '重点谈'],
        axisLabel: {
          textStyle: {
            color: '#CACACA'
          }
        },
        axisTick: {
          //y轴刻度线
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#054792', // Y轴及其文字颜色
            width: 0.5
          }
        }
      },
      yAxis: {
        min: 0,
        interval: 100,
        type: 'value',
        axisLabel: {
          textStyle: {
            color: '#CACACA'
          }
        },
        axisTick: {
          //y轴刻度线
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#054792', // Y轴及其文字颜色
            width: 0.5
          }
        }
      },
      series: [
        {
          name: '人次',
          barWidth: 25,
          data: [120, 200, 150],
          type: 'bar',
          color: ['#3699FF']
        },
        {
          name: '谈话人数',
          barWidth: 25,
          data: [70, 110, 130],
          type: 'bar',
          color: ['#7569FE']
        }
      ]
    };
    return (
      <View style={{ flex: 1 }}>
        <View style={styles.header}>
          <TouchableOpacity onPress={() => Actions.pop()}>
            <View>
              <Image
                source={this.state.imgUrl}
                style={{ width: 25.67, height: 22.33, marginBottom: 5 }}
              />
            </View>
          </TouchableOpacity>
          <View
            style={{
              borderBottomColor: '#EDEDED',
              borderBottomWidth: 1,
              borderBottomStyle: 'dashed',
              flexDirection: 'row',
              justifyContent: 'space-between'
            }}>
            <Text style={{ fontSize: 30, fontWeight: 'bold' }}>
              {this.state.title}
            </Text>
            <TouchableOpacity
              onPress={() => {
                console.log('show');
                DatePickerAndroid.open().then(this.openDatePick());
              }}>
              <Image
                source={require('../../../assets/work/eduTotal/darly.png')}
                style={{ width: 16, height: 17.33, marginTop: 15 }}
              />
            </TouchableOpacity>
          </View>
        </View>
        <ScrollView style={{ padding: 13 }}>
          <LabelView
            style={{
              // width: '100%',
              // height: 126.67,
              backgroundColor: '#fff',
              padding: 13.33
            }}>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                marginBottom: 25
              }}>
              <Text />
              <Text
                style={{ color: '#666666', fontSize: 16, textAlign: 'center' }}>
                {this.state.curDeptName}
              </Text>
              <TouchableOpacity
                onPress={() => {
                  console.log('menu');
                  this.setState({ showdepart: true });
                }}>
                <Image
                  source={require('../../../assets/work/eduTotal/menu.png')}
                  style={{ width: 11.67, height: 9.33, marginTop: 5 }}
                />
              </TouchableOpacity>
            </View>
            <Modal
              animationType="fade" // 指定了 modal 的动画类型。类型：slide 从底部滑入滑出|fade 淡入淡出|none 没有动画
              transparent={true} // 背景是否透明，默认为白色，当为true时表示背景为透明。
              visible={this.state.showdepart} // 是否显示 modal 窗口
              onRequestClose={() => {
                // this._closeModalWin();
                console.log('close Callback');
              }} // 回调会在用户按下 Android 设备上的后退按键或是 Apple TV 上的菜单键时触发。请务必注意本属性在 Android 平台上为必填，且会在 modal 处于开启状态时阻止BackHandler事件
              onShow={() => {
                console.log('modal窗口显示了');
                // this.setState({ curIndex: '' });
              }} // 回调函数会在 modal 显示时调用
            >
              <TouchableOpacity
                style={{ flex: 1 }}
                onPress={() => {
                  this.setState({ showdepart: false });
                }}>
                <View style={styles.modalLayer}>
                  <View style={styles.modalContainer}>
                    <ScrollView>
                      {this.state.departmentLists.map((e, idx) => (
                        <ScrollText
                          key={idx}
                          style={{
                            backgroundColor:
                              e.sdtDeptId === this.state.curIndex
                                ? '#ccc'
                                : '#fff',
                            color:
                              e.sdtDeptId === this.state.curIndex
                                ? '#fff'
                                : '#000'
                          }}
                          onPress={() => {
                            this.setState({
                              curIndex: e.sdtDeptId,
                              curDeptName: e.sdtDeptName,
                              showdepart: false
                            });
                            console.log(e.sdtDeptId, 335);
                          }}>
                          {e.sdtDeptName}
                        </ScrollText>
                      ))}
                    </ScrollView>
                  </View>
                </View>
              </TouchableOpacity>
            </Modal>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'space-between',
                marginBottom: 17.33
              }}>
              <View
                style={{
                  width: '50%',
                  justifyContent: 'center',
                  alignItems: 'center'
                }}>
                <Text
                  style={{
                    fontSize: 17.33,
                    color: '#000',
                    fontWeight: 'bold'
                  }}>
                  181
                </Text>
                <Text style={{ fontSize: 12, color: '#666' }}>在押人数</Text>
              </View>
              <View
                style={{
                  width: '50%',
                  justifyContent: 'center',
                  alignItems: 'center'
                }}>
                <Text
                  style={{
                    fontSize: 17.33,
                    color: '#000',
                    fontWeight: 'bold'
                  }}>
                  181
                </Text>
                <Text style={{ fontSize: 12, color: '#666' }}>在谈人数</Text>
              </View>
            </View>
            <View
              style={{
                flexDirection: 'row',
                justifyContent: 'center'
              }}>
              <Text
                style={{ color: '#666', fontSize: 10, textAlign: 'center' }}>
                统计月为2019年5月
              </Text>
            </View>
          </LabelView>
          <LabelView style={{ padding: 20, height: 163.33 }}>
            <Echarts option={option} height={163.33} />
          </LabelView>
          <LabelView style={{ padding: 20, height: 163.33 }}>
            <Echarts option={talkRateOption} height={163.33} />
          </LabelView>
          <LabelView style={{ padding: 20, height: 300 }}>
            <Echarts option={talkNumbers} height={300} />
          </LabelView>
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  header: {
    width: '100%',
    height: 98,
    backgroundColor: '#FFFFFF',
    padding: 19.33
  },
  container: {
    flex: 1
  },
  contentStyle: {
    padding: 30
  },
  contentTextStyle: {
    textAlign: 'center',
    fontSize: 26
  },
  modalLayer: {
    backgroundColor: 'rgba(0, 0, 0, 0.45)',
    flex: 1,
    justifyContent: 'center',
    padding: 32
  },
  modalContainer: {
    height: 300,
    backgroundColor: 'white'
    // justifyContent: 'center'
  },
  modalTitleStyle: {
    textAlign: 'center',
    fontSize: 26
  },
  modalButtonStyle: {
    paddingLeft: 30,
    paddingRight: 30,
    marginBottom: 10
  }
});
const OnTouchableOpacity = styled.TouchableOpacity`
  flex-direction: row;
  align-items: center;
  justify-content: center;
`;
const LabelView = styled.View`
  border-radius: 3.33;
  margin-bottom: 10.33;
  background: #fff;
`;
const ScrollText = styled.Text`
  width: 100%;
  height: 60;
  text-align: center;
  line-height: 60;
  justify-content: center;
  border-bottom-width: 1;
  border-style: solid;
  border-color: #fafafa;
`;
// AppRegistry.registerComponent('ECharts', () => ECharts);
